/* * * * * * * * * * * * * * * * * * * * * * * * * * */
/* antdesign ui-theme:dark-green with sumscope theme */
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

@import './theme-dark-green.color.less';

/* scroll bar */
::-webkit-scrollbar {
  //background-color: transparent;
}

::-webkit-scrollbar-track {
  background-color: rgba(60, 60, 60, 0.25);
}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

::-webkit-scrollbar-corner {
  background-color: rgba(60, 60, 60, 0.5);
}

::-webkit-scrollbar-thumb {
  background-color: @thumb-bar-bg;
}

::-webkit-scrollbar-thumb:hover {
  background-color: @thumb-bar-hover;
}

::-webkit-scrollbar-thumb:active {
  background-color: @thumb-bar-active;
}

html body {
  color: @default-body-font-color;
}

/* * * * * Minxins * * * * */
// button
.button-normal {
  color: @default-body-font-color;
  background: @interact-element-normal-bg;
  &:hover {
    background-color: @interact-element-hover-bg;
  }
  &:active {
    background-color: @interact-element-active-bg;
  }
}

.button-primary {
  color: @primary-color-bg-font;
  background: @primary-color;
  &:hover {
    background-color: @primary-element-hover-bg;
  }
  &:active {
    background-color: @primary-element-active-bg;
  }
}

.button-danger {
  background-color: @danger-element-normal-bg;
  border: @danger-element-normal-bg 1px solid;
  &:hover {
    background-color: @danger-element-hover-bg;
    border-color: @danger-element-hover-bg;
  }
  &:active {
    background-color: @danger-element-active-bg;
    border-color: @danger-element-active-bg;
  }
}

.button-disabled {
  background-color: @disabled-element-normal-bg;
  color: @disabled-element-normal-color;
  &:hover {
    background-color: @disabled-element-normal-bg;
    color: @disabled-element-normal-color;
  }
}

.button-ghost {
  background-color: @ghost-element-normal-bg;
  &:hover {
    background-color: @ghost-element-hover-bg;
  }
  &:active {
    background-color: @ghost-element-active-bg;
  }
}

// input
.input-normal {
  border: 1px solid @input-border-color;
  background-color: @input-bg-color;
  color: @input-color;
  &:hover {
    border-color: @input-hover-border-color;
    background-color: @input-bg-color;
  }
  &:focus:not([readonly]) {
    box-shadow: none;
    border-color: @input-hover-border-color;
    background-color: @input-focus-bg-color;
    color: @input-focus-color;
    &::placeholder {
      color: @input-focus-placeholder-color;
    }
  }
  &::placeholder {
    color: @input-placeholder-color;
  }
  &[readonly] {
    color: @input-readonly-color;
    border-color: @input-disabled-border-color;
  }
  &.ant-input-disabled {
    background-color: @input-disabled-bg-color;
    color: @input-placeholder-color;
    border-color: @input-disabled-border-color;
  }
}

.input-affix-with-icon-wrap {
  width: auto;
  border: 1px solid @input-border-color;
  background-color: @input-bg-color;
  color: @input-affix-normal-color;
  &:hover {
    border-color: @input-hover-border-color;
  }
  &-focused {
    box-shadow: none;
    border-color: @input-focus-border-color;
    background-color: @input-focus-bg-color;
    color: @input-focus-color;
    &::placeholder {
      color: @input-placeholder-color;
    }
    .ant-input-prefix {
      color: @input-affix-focus-color;
    }
  }

  &.ant-input-affix-wrapper-disabled {
    border-color: @disabled-bg-color;
    background-color:  @input-disabled-bg-color;
  }
}

// switch
.switch-normal {
  background-color: @interact-element-off-bg;
  .ant-switch-handle {
    &::before {
      background-color: @interact-element-trigger-bg;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    }
  }
  &.ant-switch-checked {
    background-color: @interact-element-on-bg;
    .ant-switch-handle {
      &::before {
        background-color: @interact-element-trigger-bg;
      }
    }
  }
  &.ant-switch-loading {
    .ant-switch-loading-icon {
      color: @interact-element-loading-color;
    }
  }
}
/* radio */
.radio {
  .ant-radio {
    .ant-radio-inner {
      background-color: @input-bg-color;
      border-color: @interact-element-normal-bg;
    }
  }
  &:hover {
    .ant-radio {
      .ant-radio-inner {
        border-color: @interact-element-hover-bg;
      }
    }
  }
  &.ant-radio-wrapper-checked {
    .ant-radio {
      .ant-radio-inner {
        border-color: @primary-element-normal-bg;
        &::after {
          background-color: @primary-element-normal-bg;
        }
      }
    }
  }
}

/* checkbox */
.check-box {
  .ant-checkbox-hover-active {
    &:hover {
      .ant-checkbox-inner {
        border-color: @interact-element-hover-bg;
      }
    }
    &:active {
      .ant-checkbox-inner {
        border-color: @interact-element-active-bg;
      }
    }
  }
  .ant-checkbox {
    .ant-checkbox-hover-active();
  }
  &:hover, &:active {
    .ant-checkbox-hover-active();
    .ant-checkbox-checked {
      .ant-checkbox-inner {
        border-color: @primary-element-normal-bg;
        background-color: @primary-element-normal-bg;
      }
    }
  }
  .ant-checkbox-inner {
    border-color: @interact-element-normal-bg;
    background-color: @input-bg-color;
  }

  .ant-checkbox-input:focus {
    & + .ant-checkbox-inner {
      border-color: @interact-element-normal-bg;
    }
  }
  .ant-checkbox-checked {
    .ant-checkbox-input:focus {
      & + .ant-checkbox-inner {
        border-color: @primary-element-normal-bg;
      }
    }
    .ant-checkbox-inner {
      border-color: @primary-element-normal-bg;
      background-color: @primary-element-normal-bg;
      &:after {
        border-color: @primary-color-bg-font;
      }
    }
  }
}

// drop-down
.drop-down-menu-wrap {
  background-color: @component-bg-color-1;
}
.drop-down-menu-item {
  color: @default-body-font-color;
  &-selected {
    color: @component-active-font-color-1;
  }
  &:hover {
    background-color: @interact-element-normal-bg;
  }
}

.select-tree-dropdown {
  ul.ant-select-tree {
    li.ant-select-tree-treenode-switcher-open {
      .ant-select-tree-node-content-wrapper {
        &.ant-select-tree-node-selected {
          color: @component-active-font-color-1;
          background-color: inherit;
        }
        &:hover {
          background-color: @component-bg-color-1;
        }
      }
    }
  }
}

.select-drop-down-item {
  .ant-select-item {
    &:not(.ant-select-customize-input):not(.ant-select-item-option-disabled) {
      background-color: @component-bg-color-1;
      &:hover {
        background-color: @interact-element-normal-bg;
      }
    }
  }
  .ant-select-item-option-selected {
    color: @component-active-font-color-1;
    background-color: @component-bg-color-1;
    &:after {
      //content: '✔';
      //color: @component-active-font-color-1;
    }
  }
  .ant-select-item-option-disabled:not(.ant-select-customize-input) {
    color: @component-disabled-color-1;
    background-color: @component-bg-color-2;
  }
  .ant-empty {
    .ant-empty-description {
      color: @component-disabled-color-1;
    }
  }
}
.drop-down-menu-submenu {
  .ant-dropdown-menu-submenu-title {
    .drop-down-menu-item();
  }
}

.clear-icon (@backgroundColor) {
  width: 12px;
  height: 12px;
  background: @backgroundColor;
  color: @default-body-font-color;
  border-radius: 2px;
  transition: background 400ms;
  text-align: center;
  line-height: 10px;
  &::after {
    content: '\D7'
  }
  span[aria-label="close-circle"] {
    display: none;
  }
}

// select
.select-base {
  background-color: #193D37;
  color: #FFEBC8;
  .ant-select-selector-focused {
    border: #FF9300 1px solid;
    box-shadow: 0 0 2px #333;
  }
  &:not(.ant-select-customize-input) {
    .ant-select-selector {
      background-color: @component-bg-color-1;
      border-color: transparent;
      border-radius: 2px;
    }
    .ant-select-arrow {
      color: @default-body-font-color;
      opacity: 0.75;
    }
    &:not(.ant-select-disabled):hover, &.ant-select-open {
      .ant-select-selector {
        .ant-select-selector-focused()
      }
    }
    &.ant-select-focused {
      .ant-select-selection {
        background-color: @interact-element-normal-bg;
      }
      .ant-select-selector {
        .ant-select-selector-focused();
      }
    }
  }
  &.ant-select-show-search {
    &.ant-select-open {
      .ant-select-selector {
        border-color: @input-hover-border-color;
        background-color: @input-focus-bg-color;
        .ant-select-selection-search-input {
          color: @input-focus-color;
        }
        .ant-select-selection-item {
          color: @input-readonly-color;
        }
      }
      .ant-select-clear {
        background: @input-focus-bg-color;
      }
    }
  }
  &.ant-select-disabled.ant-select:not(.ant-select-customize-input) {
    .ant-select-selector {
      background: @input-disabled-bg-color;
    }
  }
  .ant-select-clear {
    @background: @input-border-color;
    .clear-icon(@background);
  }
}

.ant-select-multiple .ant-select-selection-item-content{
  color: @input-readonly-color;
}

.tabs {
  &.ant-tabs-card {
    > .ant-tabs-nav {
      &::before {
        border-color: @interact-element-normal-bg;
      }
      .ant-tabs-tab {
        background: @component-bg-color-1;
        border: none;
        color: @default-body-font-color;
        margin-bottom: 1px;
        &-active {
          background: @interact-element-normal-bg;
          .ant-tabs-tab-btn {
            color: @default-body-font-color;
          }
        }
        .ant-tabs-tab-btn {
          &:active {
            color: @default-body-font-color;
          }
        }
      }
    }
  }
}


/* message */
.message {
  .ant-message-notice {
    color: @component-active-font-color-2;
    .ant-message-notice-content {
      background-color: @component-bg-color-3;
    }
  }
}

/* modal */
.ant-modal {
  color: @default-body-font-color;
  .ant-modal-content {
    background-color: @component-bg-color-1;
    color: @default-body-font-color;
    border-radius: 2px;
    overflow: hidden;
    border: @component-border-color-1 1px solid;
  }

  .ant-modal-header {
    background: @component-bg-color-1;
    border-bottom-color: transparent;
    border-width: 0;
  }

  .ant-modal-close-x {
    color: @default-body-font-color;
    &:hover {
      color: @primary-element-hover-bg;
    }
  }

  .ant-modal-title {
    color: @default-body-font-color;
    background: @component-bg-color-1;
  }

  .ant-modal-body {
    background-color: @component-bg-color-4;
    color: @default-body-font-color;
    border: 1px solid @component-bg-color-1;
  }

  .ant-modal-footer {
    background: @component-bg-color-4;
    border: 1px solid @component-bg-color-1;
    border-top: none;
  }
}

/* datepicker */
.date-picker {
  background-color: @input-bg-color;
  border: 1px solid @input-border-color;
  border-radius: 2px;

  &.ant-picker-focused {
    background-color: @input-focus-bg-color;
    box-shadow: 0 0 2px @component-box-shadow-color;
    border: 1px solid @input-hover-border-color;
    border-radius: 2px;
    .ant-picker-input {
      input {
        color: @input-focus-color;
        &::placeholder {
          color: @input-focus-placeholder-color;
        }
      }
    }
    .ant-picker-suffix {
      .anticon, .anticon-calendar {
        color: @input-affix-focus-color;
      }
    }
    .ant-picker-clear {
      @background: @input-affix-focus-color;
      .clear-icon(@background);
    }
  }

  &.ant-picker-disabled {
    background-color: @input-disabled-bg-color;
    border: 1px solid @input-disabled-border-color;
    &:hover {
      border: 1px solid @input-disabled-border-color;
    }
  }

  &:hover {
    border: 1px solid @input-hover-border-color;
    border-radius: 2px;
  }

  .ant-picker-input {
    input {
      border: none;
      color: @input-color;
      &::placeholder {
        color: @input-placeholder-color;
      }
    }
  }

  .ant-picker-suffix {
    .anticon, .anticon-calendar {
      color: @input-affix-normal-color;
    }
  }

  .ant-picker-clear {
    @background: @input-focus-placeholder-color;
    .clear-icon(@background);
  }

  .ant-picker-active-bar {
    background: @interact-element-on-bg;
  }
}

.date-picker-popup {
  .ant-picker-range-arrow {
    &::after {
      border-color: @component-border-color-1 @component-border-color-1 transparent transparent;
    }
  }

  .ant-picker-panel-container {
    .ant-picker-panel {
      border: 1px solid @component-border-color-1;
    }
    // .ant-calendar-ym-select {
    //   a {
    //     color: #d8dfeb;
    //   }
    // }
    .ant-picker-header {
      color: @default-body-font-color;
      background-color: @component-bg-color-1;
      border-bottom-color: @component-border-color-1;
      .ant-picker-header-super-prev-btn {
        color: @component-trigger-font-color-3;
        &:hover {
          color: @component-active-font-color-3;
        }
      }
      .ant-picker-header-prev-btn {
        color: @component-trigger-font-color-3;
        &:hover {
          color: @component-active-font-color-3;
        }
      }
      .ant-picker-header-next-btn {
        color: @component-trigger-font-color-3;
        &:hover {
          color: @component-active-font-color-3;
        }
      }
      .ant-picker-header-super-next-btn {
        color: @component-trigger-font-color-3;
        &:hover {
          color: @component-active-font-color-3;
        }
      }
      .ant-picker-header-view {
        .ant-picker-year-btn {
          color: @default-body-font-color;
          line-height: 24px;
          border-radius: 2px;
          &:hover {
            background-color: @interact-element-hover-bg;
          }
        }
        .ant-picker-month-btn {
          color: @default-body-font-color;
          line-height: 24px;
          border-radius: 2px;
          &:hover {
            background-color: @interact-element-hover-bg;
          }
        }
        .ant-picker-decade-btn {
          color: @default-body-font-color;
          &:hover {
            background-color: @interact-element-hover-bg;
          }
        }
      }
    }
    // .ant-calendar-year-panel, .ant-calendar-month-panel {
    //   background-color: #034089;
    //   .ant-calendar-month-panel-year-select-content {
    //     color: #eee;
    //   }
    //   .ant-calendar-year-panel-body, .ant-calendar-month-panel-body {
    //     border-top-color: #435e86;
    //   }
    //   .ant-calendar-year-panel-decade-select, .ant-calendar-month-panel-decade-select {
    //     color: #eee;
    //   }
    //   .ant-calendar-year-panel-year:hover, .ant-calendar-month-panel-month:hover {
    //     background-color: #40a9ff;
    //     color: #fff;
    //   }
    //   .ant-calendar-year-panel-last-decade-cell,
    //   .ant-calendar-year-panel-next-decade-cell {
    //     .ant-calendar-year-panel-year {
    //       color: #627fad;
    //     }
    //   }
    //   .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month {
    //     background-color: #486189;
    //     color: #999;
    //   }
    // }
    .ant-picker-body {
      border-top-color: @component-border-color-1;
      background-color: @component-bg-color-1;
      .ant-picker-content {
        .ant-picker-cell {
          background: @component-bg-color-1;
          &:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
            .ant-picker-cell-inner {
              background-color: @interact-element-hover-bg;
              color: @component-active-font-color-3;
            }
          }
          &.ant-picker-cell-disabled {
            color: @component-disabled-color-1;
          }
          .ant-picker-cell-inner {
            color: @component-disabled-color-2;
            border-radius: 2px;
          }
          &:not(.ant-picker-cell-in-view) {
            &::before {
              background-color: @component-bg-color-1;
            }
            .ant-picker-cell-inner {
              background-color: @component-bg-color-1;
            }
          }
          &.ant-picker-cell-selected,
          &.ant-picker-cell-range-start,
          &.ant-picker-cell-range-end {
            &.ant-picker-cell-in-view {
              .ant-picker-cell-inner {
                color: @primary-color-bg-font;
                background-color: @primary-color;
              }
            }
          }
        }
        .ant-picker-cell-in-view {
          .ant-picker-cell-inner {
            color: @default-body-font-color;
          }
        }
        .ant-picker-cell-today {
          .ant-picker-cell-inner {
            color: @primary-color;
            &:before {
              border: 1px solid @primary-color;
            }
          }
        }
        .ant-picker-cell-disabled {
          &::before {
            color: @component-disabled-color-2;
            background-color: @component-bg-color-1;
          }
          .ant-picker-cell-inner {
            color: @component-disabled-color-2;
            background-color: @component-bg-color-1;
          }
        }
        .ant-picker-cell-range-start {
          &::before {
            background-color: @interact-element-normal-bg;
          }
          .ant-picker-cell-inner {
            background-color: @interact-element-normal-bg;
            color: @default-body-font-color;
          }
        }
        .ant-picker-cell-in-range {
          &::before {
            background-color: @interact-element-normal-bg;
          }
        }
        .ant-picker-cell-range-end {
          &::before {
            background-color: @interact-element-normal-bg;
          }
          .ant-picker-cell-inner {
            background-color: @interact-element-normal-bg;
            color: @default-body-font-color;
          }
        }
        .ant-picker-cell-range-hover, .ant-picker-cell-range-hover-start, .ant-picker-cell-range-hover-end {
          .ant-picker-cell-inner {
            &::after {
              background-color: @interact-element-normal-bg;
            }
          }
        }
      }
    }
    .ant-picker-footer {
      background-color: @component-bg-color-1;
      border: none;
      .ant-picker-today-btn {
        color: @default-body-font-color;
      }
    }

    // .ant-calendar-date {
    //   color: #627188;
    // }
    //
    // .ant-calendar-cell:not(.ant-calendar-last-month-cell):not(.ant-calendar-next-month-btn-day) {
    //   .ant-calendar-date {
    //     color: #f1f1f1;
    //   }
    // }
  }
}


/* tooltip */
.tooltip {
  color: @default-body-font-color;
  .ant-tooltip-arrow-content {
    background-color: @component-bg-color-5;
  }
  .ant-tooltip-inner {
    background-color: @component-bg-color-1;
    border: 1px solid @component-bg-color-5;
    border-radius: 2px;
    color: @default-body-font-color;
  }
}

/* ant-table */
.table-a {
  .ant-table.ant-table-fixed-header {
    .ant-table-content {
      .ant-table-body {
        background-color: transparent;
      }
    }
  }
  .ant-table-container {
    .ant-table-header {
      .ant-table-thead th {
        background-color: @table-header-bg;
        color: @table-header-color;
        border: none;
      }
    }
    .ant-table-body {
      background: @table-body-bg;
      background-size: 100% 70px;
    }
    .ant-table-tbody {
      tr td {
        color: @default-body-font-color;
        transition: background-color,background 0.2s;
        background-color: transparent;
      }
      tr[aria-hidden] > td {
        line-height: 0;
      }
      // tr:not(.ant-table-placeholder) td[colspan] {
      //   background-color: #16322D;
      //   line-height: 12px;
      // }
      tr.ant-table-row-selected td {
        background-color: @table-row-selected;
      }
      tr.ant-table-placeholder .ant-table-expanded-row-fixed {
        width: auto;
      }
      .ant-table-row {
        background-color: @table-body-bg-color-odd;
        .ant-table-row-expand-icon {
          color: @table-row-expand-icon-color;
        }
        &:nth-child(even) {
          background-color: @table-body-bg-color-even;
        }
        &:hover > td {
          background-color: @table-row-hover-bg;
        }
      }
      .ant-table-expanded-row {
        background-color: @table-row-expand-bg-color;
        color: @table-row-expand-icon-color;
      }
    }
    .ant-table-placeholder {
      .ant-empty-description {
        color: @table-empty-description-color;
      }

      &:hover {
        background-color: @table-empty-description-hover-bg;
      }
    }
  }
  &.small {
    .ant-table-container {
      .ant-table-body {
        background-size: 100% 60px;
      }
    }
  }
  .ant-table-content,.ant-table-body,.ant-table-body-inner {
    .ant-table-thead {
      // th {
      //   color: @table-header-color;
      //   background-color: #081d56;
      // }
      .ant-table-column-sorter {
        color: inherit;
      }
    }

  }
  .ant-table-cell-scrollbar {
    box-shadow: none;
  }
  .ant-table-placeholder {
    border-color: transparent;
    color: @table-empty-description-color;
  }
  // 自适应高度滚动条
  &.auto-scroll-y {
    .ant-table-header {
      &.ant-table-hide-scrollbar{
        background-color: @table-header-bg;
      }
    }
  }
}

.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > thead > tr > th, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > thead > tr > th, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > tbody > tr > td, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tbody > tr > td, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tfoot > tr > th, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > tfoot > tr > th, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tfoot > tr > th, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tfoot > tr > td, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > tfoot > tr > td, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tfoot > tr > td{
  border-color: @diff-border-color-1;
}
.ant-table.ant-table-bordered > .ant-table-container{
  border-color: @diff-border-color-1;

}
.ant-table-thead > tr > th{
  color: @table-header-color;
}

/* fast-table */
.table-vt {
  .vt-header {
    .th {
      color: @table-header-color;
      background-color: @table-header-bg;
      font-size: 12px;
      .drag-source {
        // background-color: #233460;
        // color: #d8dfeb;
      }
    }
    .table-header-cell {
      justify-content: center;
    }
    .react-resizable-handle {
      background: @table-resizable-handle-bg;
    }
  }
  .vt-body {
    background: @table-body-bg;
    background-size: 100% 60px !important;
    position: relative;
    .vt-row {
      background-color: @table-body-bg-color-even;
      height: 40px;

      &:nth-child(even) {
        background-color: @table-body-bg-color-odd;
      }

      &:hover {
        background-color: @table-row-hover-bg;
      }
      .td {
        font-size: 12px;
        margin: 0;
        padding: 0;
        line-height: 30px;
      }
    }
  }
  .vt-empty-text {
    color: @table-empty-description-color;
  }
  // .vt-table-row {
  //   background-color: #2b3e68;
  // }
  // .vt-table-row.ss-row:nth-of-type(odd) {
  //   //background-color: #2b3e68;
  //   background-color: #2b3e68;
  // }
}

/* cheetach-grid */
.grid-table {
  .orange-meow-grid-headers {
    color: @table-header-color;
    background-color: @table-header-bg;
    .header-cell {
      background-color: @table-header-bg;
      border-right: @table-header-split-color 1px solid;
    }
    &-frozen-cols {
      color: @table-header-color;
      background-color: @table-header-bg;
      .header-cell {
        background-color: @table-header-bg;
        border-right: @table-header-split-color 1px solid;
      }
    }
  }
  .orange-meow-grid-theme-computed {
    .body {
      color: @table-body-color;
    }
    .row-even {
      background-color: @table-body-bg-color-even;
    }
    .row-odd {
      background-color: @table-body-bg-color-odd;
    }
    .row-focus {
      background-color: @table-row-selected;
    }
  }
}

/* pagination */
.pagination {
  li.ant-pagination-item, li.ant-pagination-prev, li.ant-pagination-next {
    border-color: transparent;
    .ant-pagination-item-link {
      background-color: @component-bg-color-1;
      color: @component-trigger-font-color-3;
      &:hover {
        background-color: @interact-element-hover-bg;
      }
    }
    &.ant-pagination-disabled {
      .ant-pagination-item-link {
        background-color: @disabled-bg-color;
        &:hover {
          background-color: @disabled-bg-color;
          color: inherit;
        }
      }
    }
  }
  li.ant-pagination-item {
    border-color: transparent;
    color: @component-active-font-color-3;
    background-color: transparent;
    &.ant-pagination-item-active {
      background-color: @interact-element-on-bg;
      a {
        color: @component-active-font-color-3;
      }
    }
  }
  .ant-pagination-options {
    .ant-pagination-options-quick-jumper {
      //input:focus {
      //  //background-color: #FF7D00;
      //  color: #000;
      //}
      input {
        .input-normal();
        // background-color: #16285a;
        // border-color: #16285a;
        // &:hover {
        //   border-color: ~`colorPalette("#2F7AD5", @{hoverHighLightRank})`;
        // }
        // &:focus {
        //   border-color: ~`colorPalette("#2F7AD5", @{hoverHighLightRank})`;
        //   background-color: ~`colorPalette("#2B3E68", @{focusHighLightRank})`;
        // }
      }
    }
  }
}

/* ui themes */
.dark-green {
  // DropDown
  .ant-dropdown, .ant-dropdown-menu-submenu {
    ul.ant-dropdown-menu {
      .drop-down-menu-wrap();
    }
    .ant-dropdown-menu-item {
      .drop-down-menu-item();
    }
    .ant-dropdown-menu-submenu {
      .drop-down-menu-submenu();
    }
  }

  .ant-select-dropdown {
    .drop-down-menu-wrap();
    .ant-select-item-option {
      .drop-down-menu-item();
    }
    .select-drop-down-item();
    .select-tree-dropdown();
  }

  // button
  .ant-btn {
    .button-normal();
    &.ant-btn-primary {
      .button-primary();
    }
    &.ant-btn-danger {
      .button-danger();
    }
    &[disabled] {
      .button-disabled();
    }
    &.ant-btn-ghost {
      .button-ghost();
    }
  }

  .ant-input {
    .input-normal();
  }

  .ant-input-affix-wrapper {
    .input-affix-with-icon-wrap();
  }

  .ant-radio-wrapper {
    .radio();
  }

  .ant-checkbox-wrapper {
    .check-box();
  }

  .ant-switch {
    .switch-normal();
  }

  .ant-select {
    .select-base();
  }

  .ant-tabs {
    .tabs();
  }

  .ant-message {
    .message();
  }

  .ant-tooltip {
    .tooltip();
  }

  .ant-table-wrapper {
    .table-a();
  }

  .fast-table-ex {
    .table-vt();
  }

  .ant-modal {
    .ant-modal()
  }

  .ant-picker {
    .date-picker();
  }
  .date-picker-popup();

  .ant-pagination {
    .pagination();
  }

  .orange-meow-grid {
    .grid-table();
  }
}
